
export const types = {
    success: 'success',
    error: 'error',
    warning: 'warning',
    info: 'info'
}

/* 弹窗类  */ 
export class Alert {
    msg;
    time;
    type;
    constructor(msg, time, type) {
        this.msg = msg
        this.time = time
        this.type = type || types.info
    }
    show() {
        this.createEle()
    }
    createEle() {
        const ele = document.createElement('div')
        ele.innerHTML = this.msg
        this.setStyle(ele)
        this.animation(ele)
        document.body.appendChild(ele)
        setTimeout(() => {
            this.destroyed(ele)
        }, this.time);
    }

    destroyed(ele) {
        document.body.removeChild(ele)
    }

    setStyle(ele) {
        ele.style.position = 'relative'
        ele.style.left = '50%'
        ele.style.zIndex = '100'
        if (this.type === types.success) {
            ele.style.backgroundColor = 'green'
        } else if (this.type === types.error) {
            ele.style.backgroundColor = 'red'
        } else if (this.type === types.warning) {
            ele.style.backgroundColor = 'orange'
        } else {
            ele.style.backgroundColor = 'rgba(0,0,0,0.5)'
        }
        return ele
    }
    animation(ele) {
        ele.classList.add('new-element');

    }
}